<template>
  <div class="user">
    <user-header>
      <div slot="left">
        <div class="back" @click="back"></div>
      </div>
      <div slot="middle" class="title" @click="changeColor">
        <div :class="isactive === true ? 'active' : 'noactive'">我喜欢的</div>
        <div :class="isactive === false ? 'active' : 'noactive'">最近听的</div>
      </div>
    </user-header>
    <div class="random_play">
      <span class="r_left"></span>
      <span class="r_right">随机播放全部</span>
    </div>
    <div class="content" v-show="isactive">
      <img src="@/assets/image/default.png" alt="" />
      <p>暂无收藏歌曲</p>
    </div>
    <ul class="content_right" v-show="!isactive">
      <li class="item">
        <h3 class="sing_name">兰花草 (Live)</h3>
        <p class="author">宋亚轩·歌曲合辑</p>
      </li>
    </ul>
  </div>
</template>
<script>
import UserHeader from "@/common/Header";
export default {
  name: "User",
  components: {
    UserHeader,
  },
  data() {
    return {
      isactive: true,
    };
  },
  methods: {
    back: function () {
      window.history.back();
    },
    changeColor: function () {
      this.isactive = !this.isactive;
    },
  },
};
</script>
<style lang="scss" scoped>
.user {
  width: 100%;
  .back {
    width: 22px;
    height: 22px;
    margin: 11px auto;
    background-image: url("");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .title {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 7px 0;
    display: flex;
    justify-content: space-evenly;
    line-height: 30px;
    font-size: 14px;
  }
  .random_play {
    margin: 30px auto 0;
    width: 135px;
    height: 32px;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 7px 16px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid #ccc;
    .r_left {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .r_right {
      display: inline-block;
      font-size: 12px;
      height: 16px;
      line-height: 16px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
    }
  }
  .content {
    position: fixed;
    width: 375px;
    top: 50%;
    transform: translateY(-50%);
    img {
      display: block;
      width: 86px;
      height: 90px;
      margin: 0 auto;
    }
    p {
      text-align: center;
      margin-top: 30px;
    }
  }
  .content_right {
    width: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    .item {
      width: 100%;
      height: 64px;
      box-sizing: border-box;
      padding: 10px 0;
      box-sizing: border-box;
      border:1px solid black;
      .sing_name {
        font-size: 16px;
        height: 20px;
        color: #ffffff;
      }
      .author {
        margin: 4px 0 0;
        font-size: 14px;
        color: #595959;
        height: 20px;
      }
    }
  }
}
.active {
  background: #333333;
  color: #fff;
  width: 50%;
}
.noactive {
  width: 50%;
  background: #222222;
  color: #656565;
}
</style>